<template>
  <div class="wrap">
    <div class="content">
      <h2 class="content-header">
       <p> <Icon type="md-checkmark-circle" size="20" color="pink"/>
         {{item.shop_name}}
         <Tag   color="warning" v-if="item.order_zt" >{{$t(item.order_zt)}}</Tag>
       </p>
        <p class="header">
          <span @click="$utils.clipboard(item.ordernumber)">
           {{$t('订单号')}}：{{item.ordernumber}}  <Icon type="md-copy" /></span>
            </p>
      </h2>
      <Row class="item-row" v-for="goods in item.goodsinfo" :key="goods.id">
        <Col span="3">
          <img
            class="content-cover"
            :src="goods.thumb_url"
        /></Col>
        <Col span="21">
          <div class="content-right">
            <h4 class="content-right-title">
              {{ goods.goods_name }}
            </h4>
            <p class="content-right-desc">
              <span>{{ goods.goods_attr_str }}</span>
              <span>{{ `x ${goods.goods_num}` }}</span>
            </p>
            <p class="content-right-price">
              {{ `¥ ${goods.price}` }}
            </p>
          </div>
        </Col>
      </Row>
    <!-- <countDown/> -->
    </div>
    <div class="bottom">
      <p class="bottom-total">
        {{ item.goodsinfo.length }}{{$t('件商品')}}，{{$t('总计')}}
        {{ `¥ ${item.total_price}` }}
      </p>
      <div class="bottom-actions">
        <Block v-if="[1,2].includes(item.filter)">
          <Button @click="cancelOrder"  v-if="item.filter ===1">{{$t('取消订单')}}</Button>
          <Button type="error">{{$t('确认支付')}}</Button>
        </Block>
        <Button type="error" @click="confirmReceipt" v-if="item.filter ==3">{{$t('确认收货')}}</Button>
        <Button type="error" @click="$utils.goOrderDetail(item.ordernumber)">{{$t('订单详情')}}</Button>
      </div>
    </div>
  </div>
</template>
<script>
import debounce from "lodash/fp/debounce"
import countDown from "@/components/countDown"
import {clipboard} from "../../../common/utils";
export default {
  name: "OrderItem",
  props: {
    item: {
      type: Object,
      required: true,
      default: () => {},
    },
  },
  components:{
    countDown
  },
  data() {
    return {
      endTime:'',
      //  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法
      endText:'',
    }
  },

  methods:{
    confirmReceipt(){

    },
    cancelOrder(){
      this.$emit('cancelOrder',this.item.ordernumber)
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/common/style/common.scss";
.wrap {
  padding: 20px 20px 30px;
  border-bottom: 1px dashed #eee;
}
.header {
  @include flex($jc: space-between);
}
.item-row {
  width: 100%;
  padding-right: 20px;
}
.content {
  @include flex();

  //border-bottom: 1px dashed #eee;
  width: 100%;
  &-header{
    width:100%;
    @include flex($jc:space-between);
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
  }
  &-cover {
    border-radius: 6px;
    overflow: hidden;
    margin-right: 10px;

  }
  &-right {
    margin-left: 20px;
    width: 100%;
    &-title {
      font-size: 14px;
      margin-bottom: 10px;
    }
    &-desc {
      @include flex($jc: space-between);
      margin-bottom: 10px;
    }
    &-price {
      font-size: 18px;
      color: #e2231a;
      font-weight: 600;
    }
  }
}
.bottom {
  padding: 15px 0 0;
  &-total {
    text-align: right;
  }
  &-actions {
    margin-top: 20px;
    @include flex($jc: flex-end);
    .ivu-btn {
      margin-left: 20px;
    }
  }
}
</style>
